<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Meghna One page parallax responsive HTML Template ">

    <meta name="author" content="Muhammad Morshed">

    <title>房产量化投资助手</title>

    <!-- Mobile Specific Meta
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../static/img/favicon.png"/>

    <!-- CSS
    ================================================== -->
    <!-- Fontawesome Icon font -->
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- Animate.css -->
    <link rel="stylesheet" href="../static/css/animate.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="../static/css/owl.carousel.css">
    <!-- Grid Component css -->
    <link rel="stylesheet" href="../static/css/component.css">
    <!-- Slit Slider css -->
    <link rel="stylesheet" href="../static/css/slit-slider.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../static/css/main.css">
    <!-- Media Queries -->
    <link rel="stylesheet" href="../static/css/media-queries.css">

    <!--
    Google Font
    =========================== -->

    <!-- Oswald / Title Font -->
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
    <!-- Ubuntu / Body Font -->
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>

    <!-- Modernizer Script for old Browsers -->
    <script src="../static/js/modernizr-2.6.2.min.js"></script>

    <!-- 引入 ECharts 文件 -->
    <script src="../static/js/echarts.common.js"></script>
    <!--引入 layui-->
    <link rel="stylesheet" href="../static/css/layui.css">
    <script src="../static/js/layui.js" charset="utf-8"></script>

</head>

<body id="body">
<!--
Start Preloader
==================================== -->
<div id="loading-mask">
    <div class="loading-img">
        <img alt="Meghna Preloader" src="../static/img/preloader.gif"/>
    </div>
</div>
<!--
End Preloader
==================================== -->


<!--
Fixed Navigation
==================================== -->
<header id="navigation" class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!-- responsive nav button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- /responsive nav button -->

            <!-- logo -->
            <a class="navbar-brand" href="#body">
                <h1 id="logo" style="color:#6CB670">
                    房产量化投资助手
                </h1>
            </a>
            <!-- /logo -->
        </div>

        <!-- main nav -->
        <nav class="collapse navbar-collapse navbar-right" role="Navigation">
            <ul id="nav" class="nav navbar-nav">
                <li class="current"></li>
                <li><a href="#showcase">走势图</a></li>
                <li><a href="#our-team">表格</a></li>
            </ul>
        </nav>
        <!-- /main nav -->

    </div>
</header>
<!--
End Fixed Navigation
==================================== -->


<!-- Start Portfolio Section
=========================================== -->


<section id="showcase" style="background-color:#100C2A;">
    <div class="container">
        <div class="row wow fadeInDown" data-wow-duration="500ms">
            <div class="col-lg-12">

                <!-- section title -->
                <div class="title text-center">
                    <h2>走势 <span class="color">图</span></h2>
                    <div class="border"></div>
                </div>
                <!-- /section title -->

                <!-- portfolio item filtering -->
                <div class="portfolio-filter clearfix">
                    <ul class="text-center">
                        <li><a href="javascript:void(0)" class="filter" data-filter="all">全部</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-filter=".app">刚需图</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-filter=".web">优质房图</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-filter=".photoshop">走势图</a></li>
                    </ul>
                </div>
                <!-- /portfolio item filtering -->

            </div> <!-- /end col-lg-12 -->
        </div> <!-- end row -->
    </div>    <!-- end container -->

    <!-- portfolio items -->

    <div style="background-color:#100C2A;color:#B9B8CE">
        <form action="##" onsubmit="return false" method="post" id="myForm" target="iframe">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4" style="margin: auto">
                    Province:<br>
                    <input type="text" name="province" value="广东" style="color: #0C0C0C">
                </div>

                <div class="layui-col-md4" style="margin: auto">
                    City:<br>
                    <input type="text" name="city" value="广州" style="color: #0C0C0C">
                </div>
                <div class="layui-col-md4" style="margin: auto">
                    District:<br>
                    <input type="text" name="district" value="南沙" style="color: #0C0C0C">
                </div>
                <div class="layui-col-md4" style="margin: auto">
                    Community:<br>
                    <input type="text" name="community_name" value="碧桂园天玺湾" style="color: #0C0C0C">
                    <br>
                </div>

                <div class="layui-col-md4" style="margin: auto">
                    <div class="layui-anim" data-anim="layui-anim-scaleSpring">
                        <button class="layui-btn" data-type="reload">
                            <input class="layui-btn layui-input-inline search" type="button" onclick="loadsexnums()"
                                   value="Submit" id="SUBMIT"
                                   style="background-color:transparent;border:0; ">
                        </button>
                    </div>
                </div>
            </div>
            <br>
        </form>

        <iframe id="iframe" name="iframe" style="display:none;"></iframe>
    </div>


    <div class="portfolio-item-wrapper wow fadeInUp" data-wow-duration="500ms">

        <ul id="og-grid" class="og-grid">
            <!--刚需图-->
            <li class="mix app" style="width: 100%;height:300px;margin: auto;">
                <div id="GangMap" style="width: 850px;height:280px;margin: auto;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var chartDomGangMap = document.getElementById('GangMap');
                    var myChartGangMap = echarts.init(chartDomGangMap, 'dark');
                    var option;

                    option = {
                        title: {
                            text: '刚需房价格指数走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['刚需房价格指数']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: {{ deal_month2 |tojson }}
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '刚需房价格指数',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: {{ num2 | tojson}}
                            }
                        ]
                    }
                    option && myChartGangMap.setOption(option);


                </script>
                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-cyan" lay-percent="95%"></div>
                </div>
            </li>

            <!--软需图-->
            <li class="mix web" style="width: 100%;height:300px;margin: auto;">
                <div id="RuanMap" style="width: 850px;height:300px;margin: auto;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var chartDomRuanMap = document.getElementById('RuanMap');
                    var myChartRuanMap = echarts.init(chartDomRuanMap, 'dark');
                    var option;

                    option = {
                        title: {
                            text: '优质房价格指数走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['优质房价格指数']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: {{ deal_month1 | tojson}}
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '优质房价格指数',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: {{ num1 | tojson}}
                            }
                        ]
                    };
                    option && myChartRuanMap.setOption(option);

                </script>
                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-cyan" lay-percent="95%"></div>
                </div>
            </li>
            <!-- /single portfolio item -->
        </ul> <!-- end og grid -->

    </div>


    <div id="runningMap1" style="width: 100%;height:400px;margin: auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDomrunningMap1 = document.getElementById('runningMap1');
        var myChartrunningMap1 = echarts.init(chartDomrunningMap1, 'dark');
        var option;

        option = {
            title: {
                text: '最大值、最小值和中位数走势图'
            },
            tooltip: {
                trigger: 'axis'

            },
            legend: {
                data: ['中位数', '最大值', '最小值']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ deal_month | tojson}}
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '中位数',
                    type: 'line',
                    stack: '总量1',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ median_price }}
                },
                {
                    name: '最大值',
                    type: 'line',
                    stack: '总量2',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ max_price }}
                },
                {
                    name: '最小值',
                    type: 'line',
                    stack: '总量3',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ min_price }}
                }
            ]
        };
        option && myChartrunningMap1.setOption(option);
    </script>

    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-cyan" lay-percent="95%"></div>
    </div>

    <div id="runningMap2" style="width: 100%;height:400px;margin: auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDomrunningMap2 = document.getElementById('runningMap2');
        var myChartrunningMap2 = echarts.init(chartDomrunningMap2, 'dark');
        var option;

        option = {
            title: {
                text: '成交量走势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['成交量']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ deal_month | tojson}}
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '成交量',
                    type: 'line',
                    stack: '总量',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ deal_count }}
                }
            ]
        };

        option && myChartrunningMap2.setOption(option);
    </script>

    <div id="ALL" style="width: 100%;height:400px;margin: auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var chartDomALL = document.getElementById('ALL');
        var myChartALL = echarts.init(chartDomALL, 'dark');
        var option;

        option = {
            title: {
                text: '价格指数走势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['价格指数']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ deal_month3 | tojson}}
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '价格指数',
                    type: 'line',
                    stack: '总量',
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ num3|tojson }}
                }
            ]
        };

        option && myChartALL.setOption(option);
    </script>

    <div class="layui-progress layui-progress-big">
        <div class="layui-progress-bar layui-bg-cyan" lay-percent="95%"></div>
    </div>

    <div id="newForm" style="width: 100%;height:400px;margin: auto;font-size:x-large;">
        <div style="background-color:#100C2A;color:#B9B8CE">
            <form action="/" id="showForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm5">
                        <br><span style="color:dodgerblue">成交量最高的房型:</span>
                        <input type="text" id="houseHigh" name="houseHigh"
                               value={{ max_room_num[0] }} readonly="readonly"
                               style="background-color:transparent;border:0;">
                    </div>
                    <div class="layui-col-sm4" >
                        <br><span style="color:dodgerblue">比例:</span>
                        <input type="text" id="rate" name="rate" value={{ max_room_num[2] }} readonly="readonly"
                               style="background-color:transparent;border:0;">
                        <br>
                    </div>
                    <div class="layui-col-sm3">
                        <br><span style="color:dodgerblue">数量:</span>
                        <input type="text" id="number" name="number" value="{{ max_room_num[1] }}" readonly="readonly"
                               style="background-color:transparent;border:0;">
                    </div>
                    <div class="layui-col-sm5">
                        <br><span style="color:dodgerblue">成交量最高总价区间:</span>
                        <input type="text" id="priceBetween" name="priceBetween" value={{ max_deal_price_range[0] }}万元
                               readonly="readonly"
                               style="background-color:transparent;border:0;">
                    </div>
                    <div class="layui-col-sm4" style="float: left">
                        <br><span style="color:dodgerblue">比例:</span>
                        <input type="text" id="deal_rate" name="deal_rate"
                               value={{ max_deal_price_range[2] }} readonly="readonly"
                               style="background-color:transparent;border:0;">
                        <br>
                    </div>
                    <div class="layui-col-sm3">
                        <br><span style="color:dodgerblue">数量:</span>
                        <input type="text" id="deal_number" name="deal_number" value="{{ max_deal_price_range[1] }}"
                               readonly="readonly"
                               style="background-color:transparent;border:0;">
                    </div>

                </div>
                <br>
            </form>
        </div>
    </div>

    <script>

        function loadsexnums() {


            myChartGangMap.showLoading();    //数据加载完之前先显示一段简单的loading动画
            myChartRuanMap.showLoading();
            myChartrunningMap2.showLoading();
            myChartrunningMap1.showLoading();
            myChartALL.showLoading();
            $.ajax({
                type: "post",
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: "/a",    //请求发送到TestServlet处
                data: $('#myForm').serialize(),
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象

                    if (result) {
                        var deal_month2_ = result["deal_month2"];
                        var num2_ = result["num2"];
                        var median_price = result["median_price"];
                        var min_price = result["min_price"];
                        var max_price = result["max_price"];
                        var deal_month = result["deal_month"];
                        var deal_count = result["deal_count"];
                        var max_room_num = result["max_room_num"];
                        var max_deal_price_range = result["max_deal_price_range"];
                        var deal_month1 = result["deal_month1"];
                        var num1 = result["num1"];
                        var deal_month3_ = result["deal_month3"];
                        var num3_ = result["num3"];

                        //console.log(deal_month2_)

                        myChartGangMap.hideLoading();    //隐藏加载动画
                        myChartGangMap.setOption({        //加载数据图表

                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: deal_month2_
                                }
                            ],
                            series: [
                                {
                                    name: '刚需房价格指数',
                                    type: 'line',
                                    stack: '总量',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: num2_
                                }
                            ]
                        });

                        myChartRuanMap.hideLoading();    //隐藏加载动画
                        myChartRuanMap.setOption({        //加载数据图表
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: deal_month1
                                }
                            ],
                            series: [
                                {
                                    name: '优质房价格指数',
                                    type: 'line',
                                    stack: '总量',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: num1
                                }
                            ]

                        });

                        myChartrunningMap1.hideLoading();    //隐藏加载动画
                        myChartrunningMap1.setOption({        //加载数据图表
                            legend: {
                                data: ['中位数', '最大值', '最小值']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: deal_month
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '中位数',
                                    type: 'line',
                                    stack: '总量1',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: median_price
                                },
                                {
                                    name: '最大值',
                                    type: 'line',
                                    stack: '总量2',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: max_price
                                },
                                {
                                    name: '最小值',
                                    type: 'line',
                                    stack: '总量3',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: min_price
                                }
                            ]
                        });

                        myChartrunningMap2.hideLoading();    //隐藏加载动画
                        myChartrunningMap2.setOption({        //加载数据图表
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: deal_month
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '成交量',
                                    type: 'line',
                                    stack: '总量',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: deal_count
                                }
                            ]

                        });

                        myChartALL.hideLoading();    //隐藏加载动画
                        myChartALL.setOption({        //加载数据图表
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: deal_month3_
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '价格指数',
                                    type: 'line',
                                    stack: '总量',
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: num3_
                                }
                            ]

                        });
                        /*$('#houseHigh').val(max_room_num[0]);
                        $('#rate').val(max_room_num[2]);
                        $('#number').val(max_room_num[1]);
                        $('#priceBetween').val(max_deal_price_range[0]);
                        $('#deal_rate').val(max_deal_price_range[2]);
                        $('#deal_number').val(max_deal_price_range[1]);*/

                        console.log(max_room_num);
                        //console.log(deal_month);
                        console.log(max_room_num[0]);
                        console.log(max_room_num[1]);
                        console.log(max_room_num[2]);


                        $('#houseHigh').attr("value", max_room_num[0]);
                        $('#rate').attr("value", max_room_num[2]);
                        $('#number').attr("value", max_room_num[1]);
                        $('#priceBetween').attr("value", max_deal_price_range[0]);
                        $('#deal_rate').attr("value", max_deal_price_range[2]);
                        $('#deal_number').attr("value", max_deal_price_range[1]);


                    }

                },
                error: function (errorMsg) {
                    alert("暂无此筛选条件的数据，请更换筛选条件!");
                    myChartGangMap.hideLoading();
                    myChartRuanMap.hideLoading();
                    myChartrunningMap1.hideLoading();
                    myChartrunningMap2.hideLoading();
                    myChartALL.hideLoading();
                }
            });

        }
    </script>


    </div>  <!-- portfolio items wrapper -->
</section>   <!-- End section -->

<!-- Start Our Team       表格
		=========================================== -->

<section id="our-team" style="background-color:#100C2A;">
    <div class="container">
        <div class="row">
            <!-- section title -->
            <div class="title text-center wow fadeInUp" data-wow-duration="500ms">
                <h2>查询 <span class="color">表格</span></h2>
                <div class="border"></div>
            </div>
            <!-- /section title -->
        </div>

        <!--table one-->
        <div style="background-color:#100C2A;color:#B9B8CE;">
            <form class="layui-form" action="/letter" method="post" id="tableoneForm">
                <div class="layui-container" style="margin:auto">

                    <div class="layui-row layui-col-space10">

                        <div class="layui-col-md4" style="margin: auto">
                            低于:
                            <input id="moneyLess" value="3" style="color: #0C0C0C">
                            万元的次新
                        </div>

                        <div class="layui-col-md4" style="margin:auto">
                            <form class="layui-form" action="">
                                核心区域：
                                <input type="checkbox" checked="" id="coreWhether" name="switch" lay-skin="switch"
                                       value="1"
                                       lay-filter="switchTest" lay-text="是|否">
                            </form>
                            <script>
                                layui.use(['form'], function () {
                                    var form = layui.form
                                        , layer = layui.layer
                                    //监听指定开关
                                    form.on('switch(switchTest)', function (data) {
                                        if (this.checked) {
                                            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                                                offset: '6px'
                                            });
                                            this.value = "1";
                                            //layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅 仅是ON|OFF', data.othis)
                                        } else {
                                            layer.msg('开关： 关掉了', {
                                                offset: '6px'
                                            });
                                            this.value = "0";
                                        }
                                    });
                                });
                            </script>
                        </div>

                        <div class="layui-col-md4" style="margin: auto">
                            <input class="layui-btn layui-input-inline search" id="search" value="search">
                        </div>

                    </div>

                </div>
            </form>

            <div style="width: 100%;height: 100%;background-color:#100C2A;color: #0C0C0C">
                <div class="layui-row">
                    <div class="layui-col-md9" style="background-color:#F0F0F0;">
                        <table id="demo" lay-filter="test" style="margin-top: 20px;overflow: auto;"></table>
                    </div>
                    <div class="layui-col-md3">
       <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad" style="background-color:#100C2A;color:#B9B8CE;font-size:large;">
    输入价格的值搜索查找
    该价格以下的次新房
      </pre>
                    </div>
                </div>


            </div>
            <script>
                layui.use(['table', "jquery"], function () {
                    var $ = layui.$,
                        table = layui.table;

                    //第一个实例
                    table.render({
                        elem: '#demo'
                        , url: '/letter' //数据接口
                        , page: true //开启分页
                        , id: "Table"
                        , limit: [15]
                        , limits: [15, 30, 60, 100]
                        , cols: [[ //表头
                            {field: 'community_name', title: '小区名', width: 180}
                            , {field: 'province', title: '省份', width: 180}
                            , {field: 'city', title: '城市', width: 180}
                            , {field: 'district', title: '区域', width: 180}
                            , {field: 'avg_price', title: '平均价格', width: 400}
                        ]]
                        , parseData: function (res) { //res 即为原始返回的数据
                            console.log(res);
                            var current_pages;
                            //第一次显示的时候this.page=true，把这种情况单独列出
                            if (this.page === true) current_pages = 1;
                            else current_pages = this.page.curr;
                            //根据分页要求选出需要显示的数据
                            var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                            return {
                                "code": res.code,
                                "msg": res.msg,
                                "count": res.data.length,
                                "data": data
                            }
                        }
                        , height: 'full-15'

                    });

                    $("#search").click(function () {
                        var moneyLess = $("#moneyLess").val()
                        var coreWhether = $("#coreWhether").val()
                        console.log(moneyLess)
                        console.log(coreWhether)
                        if (moneyLess !== "") {
                            table.reload('Table', {
                                url: '/letter'
                                , method: 'post'
                                , where: {moneyLess: moneyLess, coreWhether: coreWhether} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        } else {
                            table.reload('Table', {
                                url: '/letter'
                                , method: 'post'
                                , where: {moneyLess: "", coreWhether: ""} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        }

                    })

                });
            </script>
        </div>

        <div style="width: 100%;height: 100px;"></div>

        <!--table two-->
        <div style="background-color:#100C2A;color:#B9B8CE;">
            <form action="/up" method="post">
                <div class="layui-container" style="margin:auto">
                    <form class="layui-form">
                        <div class="layui-row layui-col-space10">

                            <div class="layui-col-md4" style="margin: auto">
                                近
                                <input id="threeTofive" style="color: #0C0C0C">年的价格指数
                            </div>

                            <div class="layui-col-md4" style="margin: auto">
                                <input class="layui-btn layui-input-inline search" id="searchTwo" value="search">
                            </div>

                        </div>
                    </form>
                </div>
            </form>

            <div style="width: 100%;height: 100%;background-color:#100C2A;color: #0C0C0C">
                <div class="layui-row">
                    <div class="layui-col-md9" style="background-color:#F0F0F0;">
                        <table id="demoTwo" lay-filter="test" style="margin-top: 20px;overflow: auto;"></table>
                    </div>
                    <div class="layui-col-md3">
       <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad"
            style="background-color:#100C2A;color:#B9B8CE;font-size:large;">
      查询近3-5年广州每个
      区涨幅最大的小区
      </pre>
                    </div>
                </div>
            </div>
            <script>
                layui.use(['table', "jquery"], function () {
                    var $ = layui.$,
                        table = layui.table;

                    //第2个实例
                    table.render({
                        elem: '#demoTwo'
                        , url: '/up' //数据接口          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
                        , page: true //开启分页
                        , id: "TableTwo"
                        , limit: [15]
                        , limits: [15, 30, 60, 100]
                        , cols: [[ //表头
                            {field: 'district', title: '区域', width: 350}
                            , {field: 'community_name', title: '小区名', width: 350}
                            , {field: 'upRate', title: '增长率', width: 300}
                        ]]
                        , parseData: function (res) { //res 即为原始返回的数据
                            console.log(res);
                            var current_pages;
                            //第一次显示的时候this.page=true，把这种情况单独列出
                            if (this.page === true) current_pages = 1;
                            else current_pages = this.page.curr;
                            //根据分页要求选出需要显示的数据
                            var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                            return {
                                "code": res.code,
                                "msg": res.msg,
                                "count": res.data.length,
                                "data": data
                            }
                        }
                        , height: 'full-15'

                    });

                    $("#searchTwo").click(function () {
                        var threeTofive = $("#threeTofive").val()
                        console.log(threeTofive)
                        if (threeTofive !== "") {
                            table.reload('TableTwo', {
                                url: '/up'        /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                , method: 'post'
                                , where: {threeTofive: threeTofive} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        } else {
                            table.reload('TableTwo', {
                                url: '/up'         ////////////////////////////////////////////////////////////////////////////////////////////////////////
                                , method: 'post'
                                , where: {threeTofive: ""} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        }

                    })

                });
            </script>
        </div>

         <div style="width: 100%;height: 100px;"></div>

        <!--table three-->
        <div style="background-color:#100C2A;color:#B9B8CE;">
            <form action="/up2" method="post">
                <div class="layui-container" style="margin:auto">
                    <form class="layui-form">
                        <div class="layui-row layui-col-space10">

                            <div class="layui-col-md4" style="margin: auto">
                                输入区域：
                                <input id="tablethreeInput" style="color: #0C0C0C">
                            </div>

                            <div class="layui-col-md4" style="margin: auto">
                                <input class="layui-btn layui-input-inline search" id="searchThree" value="search">
                            </div>

                        </div>
                    </form>
                </div>
            </form>

            <div style="width: 100%;height: 100%;background-color:#100C2A;color: #0C0C0C">
                <div class="layui-row">
                    <div class="layui-col-md9" style="background-color:#F0F0F0;">
                        <table id="demoThree" lay-filter="test" style="margin-top: 20px;overflow: auto;"></table>
                    </div>
                    <div class="layui-col-md3">
       <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad"
            style="background-color:#100C2A;color:#B9B8CE;font-size:large;">
  查询过去一年内还没有涨的
  次新小区，显示小区房子的
  亏损率
      </pre>
                    </div>
                </div>
            </div>
            <script>
                layui.use(['table', "jquery"], function () {
                    var $ = layui.$,
                        table = layui.table;

                    //第2个实例
                    table.render({
                        elem: '#demoThree'
                        , url: '/up2' //数据接口          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
                        , page: true //开启分页
                        , id: "TableThree"
                        , limit: [15]
                        , limits: [15, 30, 60, 100]
                        , cols: [[ //表头
                            {field: 'community_name', title: '小区名', width: 350}
                            , {field: 'downRate', title: '亏损率', width: 300}
                        ]]
                        , parseData: function (res) { //res 即为原始返回的数据
                            console.log(res);
                            var current_pages;
                            //第一次显示的时候this.page=true，把这种情况单独列出
                            if (this.page === true) current_pages = 1;
                            else current_pages = this.page.curr;
                            //根据分页要求选出需要显示的数据
                            var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                            return {
                                "code": res.code,
                                "msg": res.msg,
                                "count": res.data.length,
                                "data": data
                            }
                        }
                        , height: 'full-15'

                    });

                    $("#searchThree").click(function () {
                        var tablethreeInput = $("#tablethreeInput").val()
                        console.log(tablethreeInput)
                        if (tablethreeInput !== "") {
                            table.reload('TableThree', {
                                url: '/up2'        /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                , method: 'post'
                                , where: {tablethreeInput: tablethreeInput} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        } else {
                            table.reload('TableThree', {
                                url: '/up2'         ////////////////////////////////////////////////////////////////////////////////////////////////////////
                                , method: 'post'
                                , where: {tablethreeInput: ""} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        }

                    })

                });
            </script>
        </div>

        <div style="width: 100%;height: 100px;"></div>

        <!--table four-->
        <div style="background-color:#100C2A;color:#B9B8CE;">
            <form action="/up3" method="post">
                <div class="layui-container" style="margin:auto">
                    <form class="layui-form">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md4" style="margin: auto">
                                <input class="layui-btn layui-input-inline search" id="searchFour" value="search" style="color: #0C0C0C">
                            </div>

                        </div>
                    </form>
                </div>
            </form>

            <div style="width: 100%;height: 100%;background-color:#100C2A;color: #0C0C0C">
                <div class="layui-row">
                    <div class="layui-col-md9" style="background-color:#F0F0F0;">
                        <table id="demoFour" lay-filter="test" style="margin-top: 20px;overflow: auto;"></table>
                    </div>
                    <div class="layui-col-md3">
       <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad"
            style="background-color:#100C2A;color:#B9B8CE;font-size:large;">
    查询广州十个区，过去
    整体房价涨幅排名
      </pre>
                    </div>
                </div>
            </div>
            <script>
                layui.use(['table', "jquery"], function () {
                    var $ = layui.$,
                        table = layui.table;

                    //第一个实例
                    table.render({
                        elem: '#demoFour'
                        , url: '/up3' //数据接口
                        , page: true //开启分页
                        , id: "TableFour"
                        , limit: [15]
                        , limits: [15, 30, 60, 100]
                        , cols: [[ //表头
                            {field: 'district', title: '区域', width: 350}
                            , {field: 'rate', title: '增长率', width: 350}

                        ]]
                        , parseData: function (res) { //res 即为原始返回的数据
                            console.log(res);
                            var current_pages;
                            //第一次显示的时候this.page=true，把这种情况单独列出
                            if (this.page === true) current_pages = 1;
                            else current_pages = this.page.curr;
                            //根据分页要求选出需要显示的数据
                            var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                            return {
                                "code": res.code,
                                "msg": res.msg,
                                "count": res.data.length,
                                "data": data
                            }
                        }
                        , height: 'full-15'

                    });

                    $("#searchFour").click(function () {
                        var tableFourInput = $("#tableFourInput").val()
                        console.log(tableFourInput)
                        if (tableFourInput !== "") {
                            table.reload('TableFour', {
                                url: '/up3'
                                , method: 'post'
                                , where: {tableFourInput: tableFourInput} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        } else {
                            table.reload('TableFour', {
                                url: '/up3'
                                , method: 'post'
                                , where: {tableFourInput: ""} //设定异步数据接口的额外参数
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            })
                        }

                    })

                });
            </script>
        </div>

         <div style="width: 100%;height: 100px;"></div>


    </div>


    </div>    <!-- End row -->
    </div>    <!-- End container -->
</section>   <!-- End section -->
<div style="background-color:#100C2A;width: 100%;height:400px;margin: auto;">
    <div>

        <!-- Back to Top
        ============================== -->
        <a href="javascript:;" id="scrollUp">
            <i class="fa fa-angle-up fa-2x"></i>
        </a>

        <!-- end Footer Area
        ========================================== -->

        <!--
        Essential Scripts
        =====================================-->

        <!-- Main jQuery -->
        <script src="../static/js/jquery-1.11.0.min.js"></script>
        <!-- form.js-->
        <script src="../static/js/jquery.form.min.js"></script>
        <!-- Bootstrap 3.1 -->
        <script src="../static/js/bootstrap.min.js"></script>
        <!-- Slitslider -->
        <script src="../static/js/jquery.slitslider.js"></script>
        <script src="../static/js/jquery.ba-cond.min.js"></script>
        <!-- Parallax -->
        <script src="../static/js/jquery.parallax-1.1.3.js"></script>
        <!-- Owl Carousel -->
        <script src="../static/js/owl.carousel.min.js"></script>
        <!-- Portfolio Filtering -->
        <script src="../static/js/jquery.mixitup.min.js"></script>
        <!-- Custom Scrollbar -->
        <script src="../static/js/jquery.nicescroll.min.js"></script>
        <!-- Jappear js -->
        <script src="../static/js/jquery.appear.js"></script>
        <!-- Pie Chart -->
        <script src="../static/js/easyPieChart.js"></script>
        <!-- jQuery Easing -->
        <script src="../static/js/jquery.easing-1.3.pack.js"></script>
        <!-- tweetie.min -->
        <script src="../static/js/tweetie.min.js"></script>

        <!-- Highlight menu item -->
        <script src="../static/js/jquery.nav.js"></script>
        <!-- Sticky Nav -->
        <script src="../static/js/jquery.sticky.js"></script>
        <!-- Number Counter Script -->
        <script src="../static/js/jquery.countTo.js"></script>
        <!-- wow.min Script -->
        <script src="../static/js/wow.min.js"></script>
        <!-- For video responsive -->
        <script src="../static/js/jquery.fitvids.js"></script>
        <!-- Grid js -->
        <script src="../static/js/grid.js"></script>
        <!-- Custom js -->
        <script src="../static/js/custom.js"></script>

    </div>
</div>
</body>
<style>
    input::-webkit-input-placeholder
    {
        color: #00FF00;
    }
</style>
</html>
